<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
     let {Component} = React;
     class Demo extends Component{
         constructor(){
             super();
             this.state = {
                 username:'',
                 age:'',
                 sex:''
             }
         }
         handleChange = (ev)=>{
             this.setState({
                 [ev.target.name]:ev.target.value
             })
         }

         handleChangeRadio = (ev)=>{
             let value = !!(ev.target.value == '男')
             this.setState({
                [ev.target.name]:value
             })
         }

         handleSubmit = (ev) =>{
             let { username,age,sex } = this.state;
             alert(`${username},${age},${sex}`)
             ev.preventDefault();
             
         }

         render(){
            return(
                <div>
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            姓名：
                            <input type="text" value={this.state.usernam} name="username" onChange={this.handleChange} />
                        </label>
                        性别：
                        <label>
                            <input type="radio" name="sex" checked={this.state.sex} value="男" onChange={this.handleChangeRadio} />男
                        </label>
                        <label>
                            <input type="radio" name="sex" checked={this.state.sex} value="女" onChange={this.handleChangeRadio} />女
                        </label>
                        {/*<div>
                            爱好
                            <label>
                                <input type="checkbox" checked={this.state.} onChange={this.handleChange} value="羽毛球"/>
                                羽毛球
                            </label>
                            <label>
                                <input type="checkbox" checked={this.handleChange} onChange={this.handleChange} value="乒乓球"/>
                                乒乓球
                            </label>
                            
                            <label>
                                <input type="checkbox" checked={this.handleChange} onChange={this.handleChange} value="足球球"/>
                                足球球
                            </label>
                        </div>*/}

                        <label>
                            年龄：
                            <input type="text" value={this.state.age} name="age" onChange={this.handleChange} />
                        </label>
                        <button>提交</button>
                    
                    </form>
                </div>
            )
         }


     }

     ReactDOM.render(
         <Demo />,
         document.querySelector("#root")
     )

    </script>
</body>
</html>